<template>
<div style="height:750px">
  <div class="dormitory"  >
    <div class="searchWord" style="margin-bottom:20px">
      <div style="display: inline-block">搜索：</div>
      <el-input
        v-model="search"
        style="display: inline-block;width: 560px"
        placeholder="请输入搜索内容"
      >
      </el-input>
    </div>
    <!-- // 遍历表格 -->
    <div class="dormitoryData">
      <el-table
        border
        ref="dormitoryTable"
        :data="tables"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序号" type="index" width="65"></el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="年龄" prop="age"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="info" plain @click="distribution(scope.row)"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    <div class="yema" style="margin-top:160px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="count"
      ></el-pagination>
    </div>

      
      <el-dialog title="授权" :visible.sync="dialogFormVisible">
        <template>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="cityin in cities"
              :label="cityin.name"
              :key="cityin.id"
            >
              {{ cityin.nameZh }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-star-off"
          @click="determine()"
          >确定
        </el-button>
      </el-dialog>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dormitory: [],
      dialogFormVisible: false,
      currentPage: 1,
      pagesize: 8,
      checkAll: false,
      checkedCities: [],
      cities: [],
      cityOptions: [],
      isIndeterminate: false,
      search: "",
      username: "",
      count:0,
    };
  },

  computed: {
    tables() {
      const search = this.search;

      if (search) {
        return this.dormitory.filter((data) => {
          return Object.keys(data).some((key) => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return this.dormitory;
    },
  },
  mounted() {
    this.showtable();
  },
  methods: {
    handleSizeChange: function(size) {
      this.pagesize =size;
      
      console.log(this.pagesize);

       this.$axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pagesize: size,
        },
        url: "/user/findAllUser",
      })
        .then((result) => {
         this.count = result.data.result.count;
          this.dormitory = result.data.result.users;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.pagesize);
      console.log(currentPage);

      this.$axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pagesize: this.pagesize,
        },
        url: "/user/findAllUser",
      })
        .then((result) => {
         
      this.count = result.data.result.count;
          this.dormitory = result.data.result.users;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showtable() {
      this.$axios({
        method: "get",
        params: {
         currentPage: this.currentPage,
          pagesize: this.pagesize,
        },
        url: "/user/findAllUser",
      })
        .then((res) => {
          this.count = res.data.result.count;
          this.dormitory = res.data.result.users;
         
        })
        .catch((err) => {
          console.log(err);
        });
    },
    distribution(e) {
      this.username = e.username;
      this.$axios
        .get("/power/findAllpowers")
        .then((data) => {
          this.cities = data.data.result.allPowers;
          console.log(this.cities);

          this.cityOptions = data.data.result.list;
          console.log(this.cityOptions);

          this.$axios
            .get("/power/selectOne", {
              params: {
                username: e.username,
              },
            })
            .then((res) => {
              this.checkedCities = res.data.result;
              console.log(this.checkedCities);
            });
        });
      this.table2 = true;

      this.dialogFormVisible = true;
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },

    determine() {
      this.$axios
        .post("/power/updatePower", {
          username: this.username,
          list: this.checkedCities,
        })
        .then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            this.$message({
              message: "授权成功",
              type: "success",
            });
            (this.checkedCities = []), (this.isIndeterminate = false);
            this.dialogFormVisible = false;
          }
        });
    },


  },
};
</script>

<style></style>
